<template>
  <div class="register-container">
    <el-card class="register-card" shadow="hover">
      <div slot="header" class="card-header">
        <span style="font-size: 24px"><strong>用户注册</strong></span>
      </div>
      <el-form ref="registerForm" :model="form" :rules="rules" label-width="100px" class="register-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        <el-form-item class="button-group">
          <el-button type="primary" @click="submitForm('registerForm')" plain>注册</el-button>
          <el-button @click="resetForm('registerForm')" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'RegisterComponent',
  setup() {
    const form = ref({
      username: '',
      password: '',
      confirmPassword: ''
    });

    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { 
          validator: (rule, value, callback) => {
            if (value !== form.value.password) {
              callback(new Error('两次输入密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    });

    const submitForm = (formName) => {
      form.value.$refs[formName].validate((valid) => {
        if (valid) {
          ElMessage({
            message: '注册成功！',
            type: 'success'
          });
          resetForm(formName);
        } else {
          ElMessage({
            message: '请检查表单填写',
            type: 'error'
          });
          return false;
        }
      });
    };

    const resetForm = (formName) => {
      form.value.$refs[formName].resetFields();
    };

    return {
      form,
      rules,
      submitForm,
      resetForm
    };
  }
};
</script>

<style scoped>
.register-container {
  max-width: 500px;
  margin: 40px auto;
}

.register-card {
  background-color: #fff;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}

.register-form {
  padding: 20px 40px;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.button-group .el-button {
  margin: 0 15px;
  min-width: 120px;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
